<template>
  <el-row>
    <el-form :model="questionsForm" ref="questionsForm">
      <el-col :span="6">
        <el-form-item label-width="80px" label="学科">
          <el-select
            v-model="questionsForm.subjectID"
            placeholder="请选择"
            style="width: 100%"
            @change="simplesChange"
          >
            <el-option
              v-for="item in simples"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label-width="80px" label="二级目录">
          <el-select
            v-model="questionsForm.catalogID"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in catalogs"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label-width="80px" label="标签">
          <el-select
            v-model="questionsForm.tags"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in tags"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label-width="80px" label="关键字">
          <el-input
            v-model="questionsForm.keyword"
            placeholder="根据题干搜索"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label-width="80px" label="试题类型">
          <el-select
            v-model="questionsForm.questionType"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in questionType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label-width="80px" label="难度">
          <el-select
            v-model="questionsForm.difficulty"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in difficulty"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label-width="80px" label="方向">
          <el-select
            v-model="questionsForm.direction"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in direction"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label-width="80px" label="录入人">
          <el-select
            v-model="questionsForm.creatorID"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in creator"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label-width="80px" label="题目备注">
          <el-input
            v-model="questionsForm.keyword"
            placeholder="根据题干搜索"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label-width="80px" label="企业简称">
          <el-input v-model="questionsForm.shortName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label-width="80px" label="城市">
          <el-select
            v-model="questionsForm.province"
            placeholder="请选择"
            style="width: 48%; margin-right: 4%"
            @change="provinceChange"
          >
            <el-option
              v-for="item in datas"
              :key="item.city"
              :label="item.city"
              :value="item.city"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="questionsForm.city"
            placeholder="请选择"
            style="width: 48%"
          >
            <el-option
              v-for="item in areas"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item style="text-align: right">
          <el-button type="default" @click="clear">清除</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import { simple as getUserid } from '@/api/base/users.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as getCatalogID } from '@/api/hmmm/directorys.js'
import { simple as getTags } from '@/api/hmmm/tags.js'
import { difficulty, direction, questionType } from '@/api/hmmm/constants.js'
import { datas } from '@/api/hmmm/citys.js'
export default {
  name: 'questions-form',
  data () {
    return {
      questionsForm: {
        subjectID: '', // 学科
        creatorID: '', // 录入人
        direction: '', // 方向
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签
        catalogID: '', // 二级目录
        keyword: '', // 关键字
        shortName: '', // 企业简称
        city: '', // 城市
        province: '' // 省份
      },
      simples: [], // 学科内容
      tags: [], // 标签
      catalogs: [], //  二级目录
      difficulty, // 难度
      questionType, // 试题类型
      direction, // 方向
      creator: [], // 录入人
      datas, // 城市
      areas: [] // 区
    }
  },
  created () {
    this.getSimple()
  },
  methods: {
    // 获取学科列表
    async getSimple () {
      const { data } = await simple()
      this.simples = data
      const { data: creator } = await getUserid()
      this.creator = creator
    },
    // 获取联动数据
    async simplesChange () {
      const { data: catalogs } = await getCatalogID({
        subjectID: this.questionsForm.subjectID
      })
      const { data: tags } = await getTags({
        subjectID: this.questionsForm.subjectID
      })
      this.catalogs = catalogs || []
      this.tags = tags || []
      this.questionsForm.catalogID = ''
      this.questionsForm.tags = ''
    },
    // 城市
    provinceChange () {
      this.areas =
        datas.find(item => item.city === this.questionsForm.province)?.area || []
    },
    // 清除
    clear () {
      this.questionsForm = {
        subjectID: '', // 学科
        creatorID: '', // 录入人
        direction: '', // 方向
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签
        catalogID: '', // 二级目录
        keyword: '', // 关键字
        shortName: '', // 企业简称
        city: '', // 城市
        province: '' // 省份
      }
      this.tags = []
      this.catalogs = []
      this.areas = []
    },
    // 查询
    onSubmit () {
      this.$emit('onSubmit', this.questionsForm)
    }
  }
}
</script>

<style>
</style>
